<template>
  <el-dialog
    :title="isAdd ? '添加秒杀' : '编辑秒杀'"
    :visible.sync="isShow"
    center
    :before-close="cancel"
  >
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item prop="title" label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动期限" :label-width="formLabelWidth">
        <el-date-picker
          v-model="timer"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select
          @change="change(false)"
          v-model="form.first_cateid"
          placeholder="请选择分类"
        >
          <el-option
            v-for="item in catelist"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select
          @change="changethree(false)"
          v-model="form.second_cateid"
          placeholder="请选择分类"
        >
          <el-option
            v-for="item in child"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" :label-width="formLabelWidth">
        <el-select v-model="form.goodsid" placeholder="请选择活商品">
          <el-option
            v-for="item in goods"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          active-color="#409EFF"
          inactive-color="#DCDFE6"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="comfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { seckAdd, seckEdit, seckInfo, goodsList } from "@/request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  props: ["isShow", "isAdd"],
  data() {
    return {
      form: {
        title: "", //限时秒杀名称
        begintime: "", // 开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, // 状态 1正常2禁用
      },
      child: [],
      goods: [],
      timer: "",
      formLabelWidth: "120px",
      rules: {
        title: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      catelist: "cate/getCateList",
      // goodslist: "goods/getGoodsList",
    }),
  },
  mounted() {
    if (this.catelist.length == 0) {
      this.getCate();
    }
    // if (this.goodslist.length == 0) {
    //   this.getGoods();
    // }
    this.getSeckill();
  },
  methods: {
    ...mapActions({
      getSeckill: "seckill/changeSeckillAction",
      getCate: "cate/changeCateAction",
      // getGoods: "goods/changeGoodsListAction",
    }),
    change(n) {
      let index = this.catelist.findIndex(
        (item) => item.id == this.form.first_cateid
      );
      // console.log(index, "index");
      this.child = this.catelist[index].children;
      if (!n) {
        this.form.second_cateid = "";
        this.form.goodsid = "";
      }
    },
    changethree(n) {
      let fid = this.form.first_cateid;
      let sid = this.form.second_cateid;
      goodsList({ fid, sid }).then((res) => {
        console.log(res, "shangpin");
        this.goods = res.list;
        if (!n) {
          this.form.goodsid = "";
        }
      });
    },
    reset() {
      this.form = {
        title: "", //限时秒杀名称
        begintime: "", // 开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, // 状态 1正常2禁用
      };
      this.$refs.form.resetFields();
      this.timer = "";
    },
    lookup(id) {
      seckInfo({ id }).then((res) => {
        console.log(res, "获取一条数据");
        if (res.code == 200) {
          this.form = res.list;
          this.form.id = id;
          this.changethree(true);
          this.change(true);
          this.timer = [
            new Date(parseInt(this.form.begintime)),
            new Date(parseInt(this.form.endtime)),
          ];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    comfirm() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          console.log(this.form);
          this.form.begintime = new Date(this.timer[0]).getTime();
          this.form.endtime = new Date(this.timer[1]).getTime();
          console.log(this.timer);
          if (this.isAdd) {
            seckAdd(this.form).then((res) => {
              console.log(res, "秒杀添加");
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                this.getSeckill();
              }
            });
          } else {
            // console.log("秒杀编辑");
            seckEdit(this.form).then((res) => {
              console.log(res, "秒杀编辑");
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                this.getSeckill();
              }
            });
          }
        } else {
          alert("验证失败");
        }
      });
    },
  },
};
</script>

<style lang="less"scoped>
</style>
